<template>
	<view class="chat-video-wrap">
		<image class="chat-video" mode="aspectFill" @click="imageClick" src="https://img2.woyaogexing.com/2021/07/03/37bd35bb2a8a4f0c8af170e9e6abb7fd!400x400.jpeg"></image>
		<view class="mask"></view>
		<image class="video-play-icon" src="@/static/img/chat/play.png" mode="aspectFit" @click="imageClick"></image>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => {}
			},
		},
		methods: {
			imageClick() {
				let win = uni.getSubNVueById('video-player')
				console.log(win)
				win.show('slide-in-bottom', 200, () => {
					uni.$emit('chat-video-player', this.data)
				})
			}
		}
	}
</script>

<style lang="scss">
	.chat-video-wrap {
		position: relative;
		height: 240px;
		width: 160px;
		.chat-video {
			height: 240px;
			width: 160px;
			border-radius: 8px;
		}
		.mask {
			position: absolute;
			border-radius: 8px;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			background-color: rgba($color: #000000, $alpha: 0.3);
		}
		.video-play-icon {
			width: 32px;
			height: 32px;
			position: absolute;
			top: 96x;
			left: 64px;
			z-index: 2;
		}
	}
</style>
